<template>

  <div id="app" class="container mx-auto p-4">
    <el-dialog v-model="dialogFormVisible" title="信息">
      <el-form :model="tableform">
        <el-form-item label="标题" :label-width="100">
          {{tableform.title}}
        </el-form-item>
        <el-form-item label="内容" :label-width="100">
          {{tableform.content}}
        </el-form-item>
        <el-form-item label="课程号" :label-width="100">
          {{tableform.cno}}
        </el-form-item>
        <el-form-item label="发布时间" :label-width="100">
          {{tableform.time_start}}
        </el-form-item>
      </el-form>
    </el-dialog>
    <h1 class="text-2xl font-bold mb-4">收件箱</h1>

    <el-input placeholder="搜索邮件" class="w-full mb-4" v-model="title"></el-input>
    <el-button type="primary" @click="getInfo">搜索</el-button>

    <el-table :data="info">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="cno" label="课程号"></el-table-column>
      <el-table-column prop="time_start" label="发布时间" width="180">
        <template #default="scope">
          <span>{{ formatDate(scope.row.time_start) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

  </div>

</template>

<script setup>
import axios from "axios";
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";

const route = useRoute();
const id = route.query.id;
const info=ref([])
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0)
const title=ref('')

const dialogFormVisible=ref(false)
onMounted(()=>{
  getInfo()
})
const getInfo = () => {
  axios.get('http://localhost:8080/getInfo2',{
    params:{
      page:currentPage.value,
      size:pageSize.value,
      sno:id,
      title:title.value
    }
  }).then(res=>{
    info.value=res.data.records
    total.value=res.data.total
  }) .catch(error => {
    console.log(error)
  });
}
const tableform=ref({})
const handleView = (row) => {
  dialogFormVisible.value = true
  tableform.value = {...row}
}

const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getInfo()
};
//处理每页显示多少条事件
const handleSizeChange=(pagesize)=>{
  pageSize.value=pagesize;
  getInfo()
}
const formatDate=(timestamp)=> {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
</script>